<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, minimum-scale=1,maximum-scale=1, user-scalable=no"
        />
        <title>Touch 事件点击穿透</title>
        <style>
            .btn {
                width: 100%;
                height: 300px;
                font-size: 100px;
            }
            .mask {
                position: fixed;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
            }
        </style>
    </head>
    <body>
        <button id="btn" class="btn">提交</button>
        <div id="mask" class="mask"></div>
        <script>
            const button = document.getElementById("btn");
            const mask = document.getElementById("mask");
            button.addEventListener("click", () => {
                console.log("提交表单");
            });
            mask.addEventListener("touchend", () => {
                setTimeout(() => {
                    mask.style.display = "none";
                }, 0);
            });
        </script>
    </body>
</html>
